<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- viewport的<meta>标签，这个标签可以修改在大部分的移动设备上面的显示，为>了确保适当的绘制和触屏缩放。-->
    <title>自习去哪儿</title>
    <!--样式文件引用-->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<!--主体部分-->
<body style="margin:0">

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!--网页内的大标题-->
<div class="navbar-fixed-top">
    <div style="background-color: #14446a; padding:1% ;color: #ffffff">
        <h1 align="center" style = "margin :5%">教室信息</h1>
    </div>
    <div align="center" style="background-color: #FFFFFF; padding: 3%; align-content: center">
        <table  style="width:90%; margin-top:5%; margin-bottom: 5%;">
            <tr style="width: 100%">
                <td style="width:40%" >
                    <select id="campusSelect" class="form-control" style="width:100%">
                        <option value="0">选择校区</option>
                        <option value="1">邯郸校区</option>
                        <option value="2">枫林校区</option>
                        <option value="3">张江校区</option>
                        <option value="4">江湾校区</option>
                        <option value="5">清华分校</option>
                    </select>
                </td>
                <td style="width:40%">
                    <select id="buildingSelect" class="form-control" style="width:100%">
                        <option value="0">选择教学楼</option>
                        <option value="1">一教</option>
                        <option value="2">二教</option>
                        <option value="3">三教</option>
                        <option value="4">四教</option>
                        <option value="5">五教</option>
                        <option value="6">六教</option>
                        <option value="7">草坪</option>
                    </select>
                </td>
                <td style="width:20%">
                    <button id="searchButton" class="btn btn-primary" style="width:100%">搜索</button>
                </td>
            </tr>
        </table>
    </div>
</div>

<div id="mainTable" style="width: 90%;margin-top: 47%; margin-right: 5%; margin-left: 5%; margin-bottom: 20%">
    <table class="table table-striped table-hover table-bordered" align="center" id="newsTable" style="width: 100%">
        <thead style="width: 100%">
            <tr style="width: 100%">
                <th style="padding: 0.3%; width: 20%"><h4 align="center">教室</h4></th>
                <th style="padding: 0.3%; width: 30%"><h4 align="center">使用情况</h4></th>
                <th style="padding: 0.3%; width: 30%"><h4 align="center">人数情况</h4></th>
                <th style="padding: 0.3%; width: 20%"><h4 align="center">详情</h4></th>
            </tr>
        </thead>
        <tbody id="mainTbody">
        <tr style="width: 100%">
            <td align="center" style="padding:4%; margin-top:5% ">H3101</td>
            <td align="center" style="padding:4%; margin-top:5% ">无</td>
            <td align="center" style="padding:4%; margin-top:5% ">
                <div class="progress progress-striped active" style="margin:0">
                    <div class="progress-bar progress-bar-success" role="progressbar"
                         aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                         style="width: 0;">
                        <span class="sr-only">0%</span>
                    </div>
                </div>
            </td>
            <td align="center"><button class="add-button button btn btn-primary">查看</button></td>
        </tr>
        <tr style="width: 100%">
            <!--暂不支持修改日期-->
            <td align="center" style="padding:4%; margin-top:5% ">H3102</td>
            <td align="center" style="padding:4%; margin-top:5% ">学生活动</td>
            <td align="center" style="padding:4%; margin-top:0 ">
                <div class="progress progress-striped active" style="margin:0">
                    <div class="progress-bar progress-bar-success" role="progressbar"
                         aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                         style="width: 40%;">
                        <span class="sr-only">40%</span>
                    </div>
                </div>
            </td>
            <td align="center"><button class="add-button button btn btn-primary">查看</button></td>
        </tr>
        <tr style="width: 100%">
            <!--暂不支持修改日期-->
            <td align="center" style="padding:4%; margin-top:5% ">H3103</td>
            <td align="center" style="padding:4%; margin-top:5% ">讲座</td>
            <td align="center" style="padding:4%; margin-top:0 ">
                <div class="progress progress-striped active" style="margin:0">
                    <div class="progress-bar progress-bar-danger" role="progressbar"
                         aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
                         style="width: 100%;">
                        <span class="sr-only">100%</span>
                    </div>
                </div>
            </td>
            <td align="center"><button class="add-button button btn btn-primary">查看</button></td>
        </tr>
        <tr style="width: 100%">
            <!--暂不支持修改日期-->
            <td align="center" style="padding:4%; margin-top:5% ">H3104</td>
            <td align="center" style="padding:4%; margin-top:5% ">上课</td>
            <td align="center" style="padding:4%; margin-top:0 ">
                <div class="progress progress-striped active" style="margin:0">
                    <div class="progress-bar progress-bar-warning" role="progressbar"
                         aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
                         style="width: 70%;">
                        <span class="sr-only">70%</span>
                    </div>
                </div>
            </td>
            <td align="center"><button class="add-button button btn btn-primary">查看</button></td>
        </tr>
        <tr style="width: 100%">
            <!--暂不支持修改日期-->
            <td align="center" style="padding:4%; margin-top:5% ">H3105</td>
            <td align="center" style="padding:4%; margin-top:5% ">无</td>
            <td align="center" style="padding:4%; margin-top:0 ">
                <div class="progress progress-striped active" style="margin:0">
                    <div class="progress-bar progress-bar-success" role="progressbar"
                         aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"
                         style="width: 30%;">
                        <span class="sr-only">30%</span>
                    </div>
                </div>
            </td>
            <td align="center"><button class="add-button button btn btn-primary">查看</button></td>
        </tr>
        <tr style="width: 100%">
            <!--暂不支持修改日期-->
            <td align="center" style="padding:4%; margin-top:5% ">H3106</td>                <td align="center" style="padding:4%; margin-top:5% ">无</td>
            <td align="center" style="padding:4%; margin-top:0 ">
                <div class="progress progress-striped active" style="margin:0">
                    <div class="progress-bar progress-bar-warning" role="progressbar"
                         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                         style="width: 60%;">
                        <span class="sr-only">60%</span>
                    </div>
                </div>
            </td>
            <td align="center"><button class="add-button button btn btn-primary">查看</button></td>
        </tr>
        <tr style="width: 100%">
            <!--暂不支持修改日期-->
            <td align="center" style="padding:4%; margin-top:5% ">H3107</td>
            <td align="center" style="padding:4%; margin-top:5% ">无</td>
            <td align="center" style="padding:4%; margin-top:0 ">
                <div class="progress progress-striped active" style="margin:0">
                    <div class="progress-bar progress-bar-success" role="progressbar"
                         aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                         style="width: 20%;">
                        <span class="sr-only">20%</span>
                    </div>
                </div>
            </td>
            <td align="center"><button class="add-button button btn btn-primary">查看</button></td>
        </tr>
        <tr style="width: 100%">
            <!--暂不支持修改日期-->
            <td align="center" style="padding:4%; margin-top:5% ">H3108</td>
            <td align="center" style="padding:4%; margin-top:5% ">讲座</td>
            <td align="center" style="padding:4%; margin-top:0 ">
                <div class="progress progress-striped active" style="margin:0">
                    <div class="progress-bar progress-bar-danger" role="progressbar"
                         aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"
                         style="width: 80%;">
                        <span class="sr-only">80%</span>
                    </div>
                </div>
            </td>
            <td align="center"><button class="add-button button btn btn-primary">查看</button></td>
        </tr>
        </tbody>
    </table>
</div>

<!--底部栏-->
<div align="center" style="background-color: #14446a;padding: 2%; color:#ffffff" class="navbar-fixed-bottom">
    <div>自习去哪儿,方便不止一点点</div>
    <div>问题反馈:<a href="mailto:hexw15@outlook.com" style="color: cornflowerblue">hexw15@outlook.com</a></div>
</div>
</body>
</html>

